<template>
  <div class="window-box">
        <el-dialog
            :title="$t('aside.addConnection')"
            :visible.sync="visible"
            :append-to-body='true'
            :before-close="hideDialog">
            <el-form ref="addConnectionForm" status-icon :model="connectionForm" :rules="verification" label-width="12  0px" label-position="right">
                <el-form-item label="Host" prop="host">
                    <el-input v-model="connectionForm.host" placeholder="127.0.0.1"></el-input>
                </el-form-item>
                <el-form-item label="Port" prop="port">
                    <el-input v-model="connectionForm.port" placeholder="6379"></el-input>
                </el-form-item>
                <el-form-item label="Passowrd">
                    <el-input v-model="connectionForm.password" show-password placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="backgroundColor">
                    <el-color-picker v-model="connectionForm.backgroundColor"></el-color-picker>
                </el-form-item>
                <el-form-item label="Name" prop="name">
                    <el-input v-model="connectionForm.name" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="Model">
                    <el-radio-group v-model="connectionForm.type">
                        <el-radio label="StandAlone">{{$t('aside.connectionForm.StandAlone')}}</el-radio>
                        <el-radio label="Cluster">{{$t('aside.connectionForm.Cluster')}}</el-radio>
                    </el-radio-group>
                    <el-tooltip class="item" effect="light" :content="$t('aside.connectionForm.tip')" placement="top">
                        <i class="el-icon-info"/>
                    </el-tooltip>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click.stop="addConnection">{{$t('aside.determine')}}</el-button>
                <el-button @click.stop="hideDialog">{{$t('aside.cancel')}}</el-button>
            </span>
        </el-dialog>
  </div>
</template>

<script>
import localStoreCache from '@/util/cache/localStoreCache'
export default {
    data(){
        var portValid=(rule,value,callback)=>{
            if(!value){
                callback(new Error(this.$t('aside.connectionForm.portNotEmpty')));
            }else{
                var reg=/^[0-9]{1,5}$/;
                if(!reg.test(value)){
                    callback(new Error(this.$t('aside.connectionForm.portFormatError')));
                }else{
                    callback();
                }
            }
        }
        return {
            verification:{
                host:[
                    { required: true, message: this.$t("aside.connectionForm.hostNotEmpty"), trigger: 'blur' }
                ],
                port:[
                    { validator: portValid, trigger: 'blur' }
                ],
                name:[
                    { required: true, message: this.$t("aside.connectionForm.nameNotEmpty"), trigger: 'blur' }
                ]
            },
            connectionForm:{
                host:'',
                port:'',
                password:'',
                name:'',
                type:'StandAlone',
                uid:0,
                backgroundColor:'#FFF'
            },
            connectionBack:{},
            isEdit:false
        }
    },
    props:["visible","connection"],
    created(){
        if(this.connection){
            this.connectionForm=this.connection;
            this.connectionBack=JSON.parse(JSON.stringify(this.connection));
            this.isEdit=true
        }
    },
    methods:{
        addConnection(){
            this.$refs.addConnectionForm.validate((valid)=>{
                if (valid) {
                    let isok=false;
                    if(!this.isEdit){
                        this.connectionForm.uid=new Date().getTime();
                        isok=localStoreCache.addConnection(this.connectionForm)
                        this.$refs.addConnectionForm.resetFields();
                    }else{
                        isok=localStoreCache.editConnection(this.connectionForm,this.connectionBack.name)
                    }
                    if(isok){
                        this.$store.commit('updateConnections')
                        this.hideDialog();
                    }
                }
            })
        },
        hideDialog(){
            this.$emit("updateVisible")
        }
    }
}
</script>

<style scoped>
    .window-box >>> .el-dialog .el-dialog__body{
        padding: 30px 20px 0px 20px;
    }
</style>